<!-- 运营数据的组件 -->
<template>
<div>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/hemo' }">Home</el-breadcrumb-item>
    <el-breadcrumb-item>运营数据</el-breadcrumb-item>
    <el-breadcrumb-item>网站统计</el-breadcrumb-item>
  </el-breadcrumb>
  <div class="home">
    <div class="box">
      <div style="background-color: #fc3158;">
        <h5 style="font-size:20px;margin-left: 15px;">PV(访问人次)：</h5>
        <h5 style="font-size:20px;margin-left: 20px;">{{box1}}</h5>
      </div>
      <div style="background-color: #53d769;">
        <h5 style="font-size:20px;margin-left: 15px;">UV(访问人数)：</h5>
        <h5 style="font-size:20px;margin-left: 20px;">{{box2}}</h5>
      </div>
      <div style="background-color: #147efb;">
        <h5 style="font-size:20px;margin-left: 15px;">IP(独立IP)</h5>
        <h5 style="font-size:20px;margin-left: 20px;">{{box3}}</h5>
      </div>
    </div>
    <div style="height: 350px;width: 650px;margin: 0 auto;">
      <el-tabs type="border-card">
        <el-tab-pane label="访问来源占比">
          <div style="height: 260px;">
            <div id="myChart1" style="height: 200px;width: 600px;"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="搜索方式占比">
          <div style="height: 260px;">
            <div id="myChart2" style="height: 200px;width: 600px;"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="访客操作系统">
          <div style="height: 260px;">
            <div id="myChart3" style="height: 200px;width: 600px;"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="网络运营商">
          <div style="height: 260px;">
            <div id="myChart4" style="height: 200px;width: 600px;"></div>
          </div>
        </el-tab-pane>
        <el-tab-pane label="一天访问趋势">
          <div style="height: 260px;">
            <div id="myChart5" style="height: 250px;width: 600px;"></div>
          </div>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      // 网站数据
      box1: '',
      box2: '',
      box3: '',
      // echart1
      echarts1_data: [{
        value: 335,
        name: '直接访问'
      }, {
        value: 310,
        name: '邮件营销'
      }, {
        value: 234,
        name: '联盟广告'
      }],
      // echart2
      echarts2_data_name: [],
      echarts2_data_value: [],
      // echart3
      echarts3_data: [{
        value: 335,
        name: 'A'
      }, {
        value: 310,
        name: 'B'
      }, {
        value: 234,
        name: 'C'
      }, {
        value: 135,
        name: 'D'
      }, {
        value: 148,
        name: 'E'
      }, {
        value: 148,
        name: 'F'
      }],
      // echart4
      echarts4_data: [{
        name: 'A类',
        value: '3720'
      }, {
        name: 'B类',
        value: '2920'
      }, {
        name: 'C类',
        value: '2200'
      }, {
        name: 'D类',
        value: '1420'
      }],
      // echart5
      echarts5_data_nama: ['00:00', '01:15', '02:30', '03:45', '05:00', '06:15', '07:30', '08:45', '10:00', '11:15', '12:30', '13:45', '15:00', '16:15', '17:30', '18:45', '20:00', '21:15', '22:30', '23:45'],
      echarts5_data_value: [300, 280, 250, 260, 270, 300, 550, 500, 400, 390, 380, 390, 400, 500, 600, 750, 800, 700, 600, 400]
    }
  },
  created () {
    // 调用methods的axios
    this.getbox()
    this.getfangwenlaiyuan()
    this.getsousuo()
    this.getxitong()
    this.getwanglou()
    this.getshijian()
  },
  mounted () {
    // this.drawLine2(),
    // this.drawLine3(),
    // this.drawLine4(),
    // this.drawLine5()
  },
  methods: {
    // axios请求网站统计第一行
    async getbox () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/wangzhan/yunyingshuju')
        const tup = res.data.data[0]
        this.box1 = tup.PV
        this.box2 = tup.UV
        this.box3 = tup.IP_data
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求网站统计第二行 2.访问来源
    async getfangwenlaiyuan () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/wangzhan/laiyuan')
        const tup = res.data.data
        // console.log(tup)
        this.echarts1_data = tup
        this.drawLine()
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求网站统计第二行 3.搜索方式
    async getsousuo () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/wangzhan/sousuo')
        const tup = res.data.data
        // console.log(tup)
        var dataname = [] // 存放name
        var datavalue = [] // 存放value
        for (var i = 0; i <= 2; i++) {
          dataname.push(tup[i].name)
          datavalue.push(tup[i].value)
          // console.log(dataname)
        }
        this.echarts2_data_name = dataname
        this.echarts2_data_value = datavalue

        this.drawLine2()
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求网站统计第二行 4.访客操作系统
    async getxitong () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/wangzhan/xitong')
        const tup = res.data.data
        // console.log(tup)
        this.echarts3_data = tup
        this.drawLine3()
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求网站统计第二行 5.网络
    async getwanglou () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/wangzhan/wanglou')
        const tup = res.data.data
        // console.log(tup)
        this.echarts4_data = tup
        this.drawLine4()
      } catch (error) {
        console.log(error)
      }
    },
    // axios请求网站统计第二行 6.时间
    async getshijian () {
      try {
        const res = await this.$axios.get('http://47.106.237.228:10004/api/houtai/yunyingshuju/wangzhan/shijian')
        const tup = res.data.data
        var dataname = [] // 存放name
        var datavalue = [] // 存放value
        for (var i = 0; i <= 19; i++) {
          dataname.push(tup[i].name)
          datavalue.push(tup[i].value)
          // console.log(dataname)
        }
        this.echarts5_data_nama = dataname
        this.echarts5_data_value = datavalue
        this.drawLine5()
      } catch (error) {
        console.log(error)
      }
    },
    drawLine2 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart2'))
      // 绘制图表
      /**
                     * 图标所需数据
                     */
      var data = {
        id: 'echartPie',
        value: this.echarts2_data_value,
        legend: this.echarts2_data_name,
        color: ['#3FA7DC', '#7091C4', '#5170A2', '#E1CA74']
        // tooltipShow:false,    //设置悬浮提示显示              --默认显示true
        // hoverAnimation:false, //设置鼠标悬浮点击饼图动画效果  --默认开启动画true
      }

      /**
                 * 数据处理
                 */
      var seriesData = []
      data.value.forEach(function (item, index) {
        seriesData.push({
          value: item,
          name: data.legend[index]
        })
      })
      /// /////////////////////////////////////

      myChart.setOption({
        backgroundColor: '#fff',
        title: {
          x: '2%',
          y: '2%',
          textStyle: {
            fontWeight: 400,
            fontSize: 8,
            color: '#687284'
          },
          text: data.title || ''
        },
        tooltip: {
          trigger: 'item',
          show: data.tooltipShow !== false
          //   formatter: "{b}: {c} ({d}%)"
        },
        legend: {
          orient: 'horizontal',
          top: 16,
          icon: 'circle',
          selectedMode: false,
          itemWidth: 6,
          itemHeight: 6,
          itemGap: 6,
          borderRadius: 6,
          data: data.legend
        },
        series: [{
          type: 'pie',
          // clickable:false,
          // selectedMode: 'single',//单点击设置
          hoverAnimation: data.hoverAnimation !== false,
          radius: ['40%', '67%'],
          color: data.color,
          label: {
            normal: {
              position: 'inner',
              // formatter: '{d}%',
              formatter: function (param) {
                if (!param.percent) return ''
                var f = Math.round(param.percent * 10) / 10
                var s = f.toString()
                var rs = s.indexOf('.')
                if (rs < 0) {
                  rs = s.length
                  s += '.'
                }
                while (s.length <= rs + 1) {
                  s += '0'
                }
                return s + '%'
              },
              textStyle: {
                color: '#fff',
                fontSize: 12
              }
            }
          },
          labelLine: {
            normal: {
              show: false
            }
          },
          data: seriesData
        }]
      })
    },
    drawLine3 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart3'))
      // 绘制图表

      myChart.setOption({
        // backgroundColor: '#273454',
        color: ['#cd4692', '#9658c3', '#6c6be2', '#01aebf', '#18b794'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}$ ({d}%)',
          textStyle: {
            fontSize: 16
          }
        },
        legend: {
          data: ['A', 'B', 'C', 'D', 'E', 'F'],
          orient: 'vertical',
          right: '5%',
          top: '13%',
          itemWidth: 20,
          itemHeight: 20,
          itemGap: 30,
          textStyle: {
            color: '#',
            fontSize: 16
          }
        },
        series: [{
          name: '系统',
          type: 'pie',
          clockwise: false,
          startAngle: 90,
          radius: '55%',
          center: ['44%', '50%'],
          hoverAnimation: false,
          roseType: 'radius', // area
          data: this.echarts3_data,
          itemStyle: {
            normal: {
              borderColor: '#273454',
              borderWidth: '5'
            }
          },
          label: {
            show: true,
            position: 'outside',
            formatter: '{a|{b}：{d}%}\n{hr|}',
            rich: {
              hr: {
                backgroundColor: 't',
                borderRadius: 100,
                width: 0,
                height: 10,
                padding: [3, 3, 0, -16],
                shadowColor: '#1c1b3a',
                shadowBlur: 1,
                shadowOffsetX: '0',
                shadowOffsetY: '2'
              },
              a: {
                padding: [-35, 15, -20, 5]
              }
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 30,
              lineStyle: {
                width: 1
              }
            }
          }

        }]
      })
    },
    drawLine4 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart4'))
      // 绘制图表
      const bgColor = '#fff'
      const title = '总量'
      const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
      const echartData = this.echarts4_data

      const formatNumber = function (num) {
        const reg = /(?=(\B)(\d{3})+$)/g
        return num.toString().replace(reg, ',')
      }
      const total = echartData.reduce((a, b) => {
        return a + b.value * 1
      }, 0)

      myChart.setOption({
        backgroundColor: bgColor,
        color: color,
        // tooltip: {
        //     trigger: 'item'
        // },
        title: [{
          text: '{name|' + title + '}\n{val|' + formatNumber(total) + '}',
          top: 'center',
          left: 'center',
          textStyle: {
            rich: {
              name: {
                fontSize: 14,
                fontWeight: 'normal',
                color: '#666666',
                padding: [10, 0]
              },
              val: {
                fontSize: 22,
                fontWeight: 'bold',
                color: '#333333'
              }
            }
          }
        }, {
          text: '单位：个',
          top: 20,
          left: 20,
          textStyle: {
            fontSize: 14,
            color: '#666666',
            fontWeight: 400
          }
        }],

        series: [{
          type: 'pie',
          radius: ['45%', '60%'],
          center: ['50%', '50%'],
          data: echartData,
          hoverAnimation: false,
          itemStyle: {
            normal: {
              borderColor: bgColor,
              borderWidth: 2
            }
          },
          labelLine: {
            normal: {
              length: 20,
              length2: 120,
              lineStyle: {
                color: '#e6e6e6'
              }
            }
          },
          label: {
            normal: {
              formatter: params => {
                return (
                  '{icon|●}{name|' + params.name + '}{value|' +
                                        formatNumber(params.value) + '}'
                )
              },
              padding: [0, -100, 25, -100],
              rich: {
                icon: {
                  fontSize: 16
                },
                name: {
                  fontSize: 14,
                  padding: [0, 10, 0, 4],
                  color: '#666666'
                },
                value: {
                  fontSize: 18,
                  fontWeight: 'bold',
                  color: '#333333'
                }
              }
            }
          }
        }]
      })
    },
    drawLine5 () {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart5'))
      // 绘制图表

      myChart.setOption({
        title: {
          text: '访问人次'
          // subtext: '纯属虚构'
        },
        tooltip: {
          trigger: 'axis'
        },
        xAxis: {
          type: 'category',
          boundaryGap: true,
          data: this.echarts5_data_nama
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} W'
          }
        },
        series: [{
          name: '访问量',
          type: 'line',
          // smooth: true,
          showSymbol: false,
          symbol: false,
          lineStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
                offset: 0.7,
                color: '#993CED' // 0% 处的颜色
              }, {
                offset: 1,
                color: '#56D9FC' // 100% 处的颜色
              }], false),
              width: 5
            }
          },
          markPoint: {
            data: [{
              name: '最大值',
              type: 'max',
              valueIndex: 0
            }]
          },
          data: this.echarts5_data_value
        }]
      })
    },
    // eslint-disable-next-line space-before-function-paren
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      const myChart = this.$echarts.init(document.getElementById('myChart1'))
      // 绘制图表

      myChart.setOption({
        title: {
          text: '',
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c} ({d}%)'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问', '其他链接', '搜索引擎']
        },
        series: [{
          name: '访问来源',
          type: 'pie',
          radius: '55%',
          center: ['50%', '60%'],
          data: this.echarts1_data,
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetX: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          }
        }]
      })
    }
  }
}
</script>

<style lang="less" scoped>
    .home {
        height: 550px;
        width: 730px;
        background: #d3dce6;
        margin-top: 15px;
    }

    h3 {
        text-align: center;
    }

    .box {
        width: 700px;
        height: 200px;
        margin: 1px auto;
        display: flex;
    }

    .box div {
        height: 150px;
        width: 200px;
        margin-left: 25px;
    }
</style>
